<template>
  <div class="message-item" :class="{'ai-message': message.sender === 'ai', 'user-message': message.sender === 'user'}">
    <div class="avatar-container">
      <el-avatar :size="40" :src="message.avatar" />
    </div>
    
    <div class="message-content">
      <div class="message-text" v-html="formattedText"></div>
      <div class="message-time">{{ formattedTime }}</div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  message: {
    type: Object,
    required: true
  }
})

// 格式化消息内容（将换行符转换为<br>）
const formattedText = computed(() => {
  return props.message.text.replace(/\n/g, '<br>')
})

// 格式化时间
const formattedTime = computed(() => {
  return props.message.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
})
</script>

<style lang="scss" scoped>
.message-item {
  display: flex;
  margin-bottom: 16px;
  
  .avatar-container {
    margin-right: 12px;
  }
  
  .message-content {
    max-width: 80%;
    
    .message-text {
      padding: 12px 16px;
      border-radius: 4px;
      line-height: 1.5;
      word-break: break-word;
    }
    
    .message-time {
      margin-top: 6px;
      font-size: 12px;
      color: #999;
    }
  }
  
  &.ai-message {
    .message-text {
      background-color: #f1f7ff;
      border: 1px solid #d9ecff;
    }
  }
  
  &.user-message {
    flex-direction: row-reverse;
    
    .avatar-container {
      margin-right: 0;
      margin-left: 12px;
    }
    
    .message-content {
      align-items: flex-end;
      
      .message-text {
        background-color: #e6f7ff;
        border: 1px solid #91d5ff;
      }
    }
  }
}
</style>